<section class="flex flex-col" [formGroup]="deviceRelationsQueryFormGroup">
  <div class="flex flex-row gap-5.5">
    <mat-form-field class="mat-block max-w-50% flex-full" subscriptSizing="dynamic" style="min-width: 100px;" hideRequiredMarker>
      <mat-label translate>relation.direction</mat-label>
      <mat-select required formControlName="direction">
        <mat-option *ngFor="let type of directionTypes" [value]="type">
          {{ directionTypeTranslations.get(type) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field floatLabel="always" class="mat-block max-w-50% flex-full">
      <mat-label translate>tb.rulenode.max-relation-level</mat-label>
      <input matInput
             type="text"
             pattern="[0-9]*"
             inputmode="numeric"
             min="1"
             placeholder="{{ 'tb.rulenode.unlimited-level' | translate }}"
             formControlName="maxLevel">
      <mat-error *ngIf="deviceRelationsQueryFormGroup.get('maxLevel').hasError('min')">
        {{ 'tb.rulenode.max-relation-level-error' | translate }}
      </mat-error>
      <mat-error *ngIf="deviceRelationsQueryFormGroup.get('maxLevel').invalid">
        {{ 'tb.rulenode.max-relation-level-invalid' | translate }}
      </mat-error>
    </mat-form-field>
  </div>
  <div tb-hint-tooltip-icon="{{ 'tb.rulenode.last-level-device-relation-tooltip' | translate }}"
       *ngIf="deviceRelationsQueryFormGroup.get('maxLevel').value > 1"
       class="tb-form-row no-border no-padding last-level-slide-toggle">
    <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">
      {{ 'alias.last-level-relation' | translate }}
    </mat-slide-toggle>
  </div>
  <tb-relation-type-autocomplete
    class="flex-1"
    formControlName="relationType">
  </tb-relation-type-autocomplete>
  <tb-entity-subtype-list
    required
    [label]="'tb.rulenode.device-profiles' | translate"
    [entityType]="entityType.DEVICE"
    [emptyInputPlaceholder]="'tb.rulenode.add-device-profile' | translate"
    [filledInputPlaceholder]="'tb.rulenode.add-device-profile' | translate"
    formControlName="deviceTypes">
    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
              matTooltip="{{ 'tb.rulenode.chip-help' | translate: { inputName: 'tb.rulenode.device-profile' | translate } }}">help</mat-icon>
  </tb-entity-subtype-list>
</section>
